<template>
  <div class="color" style="height: 200px;overflow-y: auto">
    <ul class="list">
      <li v-for="item in arrList" :key="item.mobileUrl">{{item.mobileUrl}}</li>
      <mt-button  @click="increment">+ {{this.$store.state.count}}</mt-button>
      <mt-button @click="decrement">-{{loading}}</mt-button>
      <mt-button @click="go">{{num}}</mt-button>
      <mt-cell title="记录" label="实际"></mt-cell>
    </ul>
    <div class="form-group ">
      <input type="text" class="form-control"  placeholder="" v-model="value"  />
      <button type="buttom" class="btn btn-default" @click="addItem">Add Item</button>
    </div>

    <ul v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10" ref="wrapper" :style="{ height: wrapperHeight + 'px' }" >
      <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
    <div v-show="!loading">加载中。。。</div>
  </div>
</template>
<script>
import api from '@/common/api'
import { Button, Cell, InfiniteScroll } from 'mint-ui'
export default {
  data () {
    return {
      num: '跳转',
      lists: [{
        id: 1,
        title: 'test title 1'
      }, {
        id: 2,
        title: 'test title 2'
      }],
      arrList: [],
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      loading: false,
      wrapperHeight: 0,
      value: '',
      id: 0
    }
  },
  components: {
    'mt-button': Button,
    'mt-cell': Cell,
    'InfiniteScroll': InfiniteScroll
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    },
    addItem () {
      let item = {value: this.value, id: ++this.id}
      this.value = ''
      this.$store.dispatch('onAddTodo', item)
    },
    go () {
      // console.log(window.history)
      // console.log(window.history.length)
      this.$router.push('/content')
    },
    loadMore () {
      // this.loading = true
      // console.log(this.wrapperHeight)
      // api.getDomains().then((res) => {
      //   let last = this.list[this.list.length - 1]
      //   for (let i = 1; i <= 20; i++) {
      //     this.list.push(last + i)
      //     this.loading = false
      //   }
      // })
      // setTimeout(() => {
      // let last = this.list[this.list.length - 1]
      // for (let i = 1; i <= 20; i++) {
      //   this.list.push(last + i)
      //   this.loading = false
      // }
      // }, 2500)
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.num = '1999'
    })
  },
  beforeRouteLeave (to, from, next) {
    console.log(to)
    console.log('99999')
    // console.log(from)
    // console.log(next)
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  created () {
    api.getDomains().then((res) => {
      this.arrList = res
    })
  },
  mounted () {
    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
  }
}
</script>
<style scoped>
  .color{
    color:#000;
  }
</style>
